<script setup lang="ts">
import {ref} from 'vue';
import {useRouter} from 'vue-router';
import {getMessageList, setMessageRead} from "@/http/m_api/message";
import {ElMessage} from "element-plus";
import {formatDate, formatDateTime} from "@/assets/ts/utils";

const currentPage = ref(1)
const isShowSkeleton = ref(true)
const totalPage = ref(1)
const router = useRouter()

interface Message {
  id: number
  message: string
  date: string
  link?: string
}

interface MessageList {
  list: Message[],
  totalPage: number,
  totalMessage: number,
}

const messageList = ref<MessageList>({
  list: [],
  totalPage: 1,
  totalMessage: 30,
})

const getList = async (page: number) => {
  isShowSkeleton.value = true
  messageList.value.list = []
  const data = await getMessageList(page, 5)
  if (data.code === 0) {
    data.data.list.forEach((item: any) => {
      messageList.value.list.push({
        id: item.id,
        message: item.message,
        date: formatDateTime(new Date(item.createDate)),
        link: item.link
      })
    })
    messageList.value.totalPage = data.data.page.pageCount
    messageList.value.totalMessage = data.data.page.count
    currentPage.value = page
    isShowSkeleton.value = false
  } else {
    ElMessage.error('加载失败，请稍后重试')
  }
}

const handleClick = (val: Message | undefined) => {
  if (val) {
    if (val.link) {
      router.push(val.link)
    }
  }
}

setMessageRead()

getList(1)
</script>

<template>
  <div class="message-list-container">
    <!-- Header Section -->
    <div class="page-header">
      <div class="header-content">
        <h2 class="page-title">
          <i class="fas fa-bell"></i>
          我的消息
        </h2>
        <p class="page-subtitle">查看您的系统通知和消息提醒</p>
      </div>
      <div class="header-actions">
        <div class="message-counter">
          <i class="fas fa-envelope"></i>
          共 {{ messageList.totalMessage }} 条消息
        </div>
      </div>
    </div>

    <!-- Message Content -->
    <div class="message-content">
      <!-- Loading Skeleton -->
      <div v-if="isShowSkeleton" class="skeleton-container">
        <div class="skeleton-header"></div>
        <div class="skeleton-row" v-for="i in 3" :key="i">
          <div class="skeleton-cell skeleton-index"></div>
          <div class="skeleton-cell skeleton-message"></div>
          <div class="skeleton-cell skeleton-date"></div>
        </div>
      </div>

      <!-- Message Table -->
      <div v-else class="message-table-container">
        <div class="message-summary">
          当前第 <span class="highlight">{{ currentPage }}</span> 页，共 <span
            class="highlight">{{ messageList.totalMessage }}</span> 条消息
        </div>

        <el-table
            :data="messageList.list"
            stripe
            class="custom-table"
            @current-change="handleClick"
            :header-cell-style="{
            background: 'rgba(52, 73, 94, 0.8)',
            color: '#ffffff',
            fontWeight: '600',
            borderBottom: '2px solid rgba(100, 181, 246, 0.3)'
          }"
            :cell-style="{
            background: 'rgba(52, 73, 94, 0.5)',
            color: '#ffffff',
            borderBottom: '1px solid rgba(255, 255, 255, 0.05)'
          }"
            :row-style="{
            cursor: 'pointer',
            transition: 'all 0.2s ease'
          }"
            :row-class-name="'table-row'"
        >
          <el-table-column type="index" width="80" label="#" align="center"/>
          <el-table-column prop="message" label="消息内容" show-overflow-tooltip>
            <template #default="scope">
              <div class="message-cell">
                <i class="fas fa-envelope-open-text message-icon"></i>
                <span class="message-text">{{ scope.row.message }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="date" label="发送日期" width="200" align="center">
            <template #default="scope">
              <div class="date-cell">
                <i class="fas fa-calendar-alt date-icon"></i>
                <span>{{ scope.row.date }}</span>
              </div>
            </template>
          </el-table-column>
        </el-table>

        <!-- Pagination -->
        <div class="pagination-container">
          <el-pagination
              background
              layout="prev, pager, next"
              :page-count="messageList.totalPage"
              :default-current-page="currentPage"
              @current-change="(val:number) => getList(val)"
              @prev-click="getList(currentPage - 1)"
              @next-click="getList(currentPage + 1)"
              class="custom-pagination"
          />
        </div>
      </div>
    </div>

    <!-- Empty State (if needed) -->
    <div v-if="!isShowSkeleton && messageList.list.length === 0" class="empty-state">
      <div class="empty-icon">
        <i class="fas fa-inbox"></i>
      </div>
      <h3 class="empty-title">暂无消息</h3>
      <p class="empty-description">您目前没有任何系统消息或通知</p>
    </div>
  </div>
</template>

<style scoped lang="scss">
@import 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css';

.message-list-container {
  max-width: 900px;
  margin: 0 auto;
  padding: 0;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  padding: 25px 30px;
  background: linear-gradient(135deg, rgba(100, 181, 246, 0.1), rgba(144, 202, 249, 0.05));
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);

  .header-content {
    .page-title {
      color: #ffffff;
      font-size: 1.8rem;
      font-weight: 600;
      margin: 0 0 8px 0;
      display: flex;
      align-items: center;
      gap: 12px;

      i {
        color: #64b5f6;
        font-size: 1.6rem;
      }
    }

    .page-subtitle {
      color: #bdc3c7;
      font-size: 0.95rem;
      margin: 0;
    }
  }

  .header-actions {
    .message-counter {
      background: rgba(100, 181, 246, 0.15);
      color: #64b5f6;
      padding: 8px 16px;
      border-radius: 20px;
      font-size: 0.9rem;
      font-weight: 500;
      display: flex;
      align-items: center;
      gap: 8px;

      i {
        font-size: 0.9rem;
      }
    }
  }
}

.message-content {
  background: rgba(52, 73, 94, 0.6);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.3s ease;
  animation: slideInUp 0.5s ease-out;

  &:hover {
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  }
}

.message-summary {
  padding: 20px 30px;
  color: #f5f5f5;
  font-size: 0.95rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);

  .highlight {
    color: #64b5f6;
    font-weight: 600;
  }
}

.custom-table {
  width: 100%;
  border: none;

  :deep(.el-table__inner-wrapper) {
    background: transparent;
  }

  :deep(.el-table__header) {
    background: transparent;
  }

  :deep(.el-table__body) {
    background: transparent;
  }

  :deep(.el-table__empty-block) {
    background: rgba(52, 73, 94, 0.5);
  }

  // Fixed hover state with dark text for better readability
  :deep(.el-table__row) {
    &:hover > td {
      background: rgba(255, 255, 255, 0.9) !important;
      color: #2c3e50 !important;

      .message-cell {
        .message-text {
          color: #2c3e50 !important;
        }

        .message-icon {
          color: #3498db !important;
        }
      }

      .date-cell {
        color: #2c3e50 !important;

        .date-icon {
          color: #3498db !important;
        }
      }
    }
  }

  // Stripe styling fix
  :deep(.el-table__row--striped) {
    background: rgba(255, 255, 255, 0.02) !important;

    &:hover > td {
      background: rgba(255, 255, 255, 0.9) !important;
      color: #2c3e50 !important;
    }
  }
}

.message-cell {
  display: flex;
  align-items: center;
  gap: 12px;

  .message-icon {
    color: #64b5f6;
    font-size: 1rem;
    transition: color 0.2s ease;
  }

  .message-text {
    flex: 1;
    line-height: 1.5;
    color: #ffffff;
    transition: color 0.2s ease;
  }
}

.date-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #ffffff;
  transition: color 0.2s ease;

  .date-icon {
    color: #64b5f6;
    font-size: 0.9rem;
    transition: color 0.2s ease;
  }
}

.pagination-container {
  display: flex;
  justify-content: flex-end;
  padding: 20px 30px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.custom-pagination {
  :deep(.el-pagination__total),
  :deep(.el-pagination__jump) {
    color: #f5f5f5;
  }

  :deep(.btn-prev),
  :deep(.btn-next),
  :deep(.el-pager li) {
    background: rgba(52, 73, 94, 0.8);
    color: #f5f5f5;
    border: 1px solid rgba(255, 255, 255, 0.1);

    &:hover {
      color: #64b5f6;
      background: rgba(100, 181, 246, 0.1);
    }

    &.is-active {
      background: linear-gradient(135deg, #64b5f6, #42a5f5);
      color: white;
    }
  }
}

// Skeleton Loading
.skeleton-container {
  padding: 20px 30px;
}

.skeleton-header {
  height: 24px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
  border-radius: 4px;
  margin-bottom: 20px;
  animation: shimmer 1.5s infinite;
}

.skeleton-row {
  display: flex;
  gap: 15px;
  margin-bottom: 15px;
}

.skeleton-cell {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
  border-radius: 4px;
  height: 40px;
  animation: shimmer 1.5s infinite;
}

.skeleton-index {
  width: 50px;
}

.skeleton-message {
  flex: 1;
}

.skeleton-date {
  width: 150px;
}

@keyframes shimmer {
  0% {
    background-position: -200px 0;
  }
  100% {
    background-position: 200px 0;
  }
}

// Empty State
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 30px;
  text-align: center;
  animation: fadeIn 0.5s ease-out;

  .empty-icon {
    font-size: 3rem;
    color: rgba(100, 181, 246, 0.3);
    margin-bottom: 20px;
  }

  .empty-title {
    color: #ffffff;
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0 0 10px 0;
  }

  .empty-description {
    color: #bdc3c7;
    font-size: 1rem;
    max-width: 400px;
    margin: 0;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

// Responsive Design
@media (max-width: 768px) {
  .message-list-container {
    padding: 0 15px;
  }

  .page-header {
    flex-direction: column;
    gap: 20px;
    text-align: center;

    .header-actions {
      width: 100%;
      display: flex;
      justify-content: center;
    }
  }

  .pagination-container {
    justify-content: center;
  }
}

// Removed the problematic row shine effect that was causing visibility issues
:deep(.table-row) {
  position: relative;

  // Simple hover effect without the shine animation
  &:hover {
    transform: translateX(2px);
  }
}
</style>